<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>Inspector UI plugin</h1>

<p>Inspector UI plugin creates an editor and viewer of a cell model properties. Inspector creates
a two-way data-binding between the cell model and a generated
HTML form with input fields of a type declaratively specified in an options object passed
into the element inspector. The inspector is completely configurable through a JSON object.</p>

<h2>Install</h2>

<p>Add <code>joint.ui.inspector.css</code> and <code>joint.ui.inspector.js</code> files to your HTML:<p>
<pre><code>
&lt;link rel="stylesheet" type="text/css" href="joint.ui.inspector.css" /&gt;
&lt;script src="joint.ui.inspector.js"&gt;&lt;/script&gt;
</code></pre>

<h2>Create an inspector</h2>

<pre><code>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({

    el: $('#paper'),
    width: 500,
    height: 500,
    gridSize: 1,
    model: graph
});

var inspector;

function createInspector(cellView) {
    
    // No need to re-render inspector if the cellView didn't change.
    if (!inspector || inspector.options.cellView !== cellView) {
    
        if (inspector) {
            // Clean up the old inspector if there was one.

            inspector.remove();
        }

        var inspectorDefs = InspectorDefs[cellView.model.get('type')];
        
        inspector = new joint.ui.Inspector({
            inputs: inspectorDefs ? inspectorDefs.inputs : {},
            groups: inspectorDefs ? inspectorDefs.groups : {},
            cellView: cellView
        });
        inspector.render();
        $('.inspector-container').html(inspector.el);
    }
}

paper.on('cell:pointerup', function(cellView) {
    createInspector(cellView);
});
paper.on('link:options', function(evt, cellView) {
    createInspector(cellView);
});
</code></pre>

<p>The <code>joint.ui.Inspector</code> constructor takes a <code>cellView</code>, <code>inputs</code> and <code>groups</code> options objects as parameters.
    <code>cellView</code> is an object of the <code>joint.dia.CellView</code> type. This can either be a link or an element view object.
    <code>inputs</code> is an object that mimics the structure of a cell model. Only instead of the final values, it contains
    an input type definition. See below for further explanation. <code>groups</code> is an object that contains group identifiers
    as keys and group options as values. This groups define a grouping in the inspector panel.
</p>

<h2>Configuration</h2>

<p>Currently, the inspector defines these input types:</p>

<ul>
    <li><code>number</code> - creates an HTML 5 number input field. Special properties are <code>min</code> and <code>max</code>.</li>
    <li><code>text</code> - creates a text input field.</li>
    <li><code>textarea</code> - creates a textarea.</li>
    <li><code>range</code> - creates an HTML 5 range input field. Special properties are <code>min</code>, <code>max</code>, <code>step</code> and <code>unit</code>.</li>
    <li><code>color</code> - creates an HTML 5 color input field.</li>
    <li><code>select</code> - creates a select box. Special properties are <code>options</code> array that contains options for the select box.</li>
    <li><code>toggle</code> - creates a toggle (checkbox).</li>
</ul>

<p>Example:</p>

<pre><code>
var inputs = {
    attrs: {
        text: {
            'text': { type: 'textarea', group: 'text', index: 1 },
            'font-family': { 
                type: 'select', options: ['Arial', 'Helvetica', 'Comic Sans MS'], group: 'text', index: 2 
            }
        },
        rect: {
            'fill': { type: 'color', group: 'presentation', index: 1 },
            'stroke-width': { 
                type: 'range', min: 0, max: 30, defaultValue: 1, unit: 'px', group: 'presentation', index: 2 
            }
        }
    },
    myname: { type: 'text', group: 'data', index: 1 }
};

var groups = {
    text: { label: 'Text fields', index: 1 },
    presentation: { label: 'Presentation fields', index: 2 },
    data: { label: 'Custom data', index: 3 }
};

var inspector = new joint.ui.Inspector({
    cellView: cellView,
    inputs: inputs,
    groups: groups
});
</code></pre>

<p>All option objects have the <code>index</code> property that tells the inspector in what order the
inputs should be rendered within their group. The exact same property is also in the <code>groups</code> definitions
and determine the ordering of the groups.</p> 

<p>Also note that, as it can be seen in the example above, not only visual attributes can be configured for editing in the inspector
but also custom data that will be set on the cell model! This all makes the inspector an extremelly flexible and useful widget for use in diagramming applications.</p>

